<template>
  <div id="center">
    <div class="headBox">
      <img src="../../assets/img/vip_img.png" class="vip" />
      <img src="../../assets/img/open_img.png" class="open" />
      <img src="../../assets/img/set_icon.png" class="set" />
    </div>
    <div class="contentBox">
      <div class="myBox">
        <div class="head">
          <img :src="imgPath" />
          <div class="left">
            <p class="name">{{ name }}</p>
            <p class="title">{{ title }}</p>
          </div>
        </div>
        <ul class="myList">
          <li class="myLi" v-for="(item, idx) in myList" :key="idx">
            <p class="count">{{ item.count }}</p>
            <p class="text">{{ item.text }}</p>
          </li>
        </ul>
      </div>
      <div class="orderBox">
        <div class="head">
          <span class="orderText">我的订单</span>
          <span class="all">全部</span>
          <img src="../../assets/img/allright.png" class="rightIcon" alt="" />
        </div>
        <ul class="orderList">
          <li class="orderLi" v-for="(item, idx) in orderList" :key="idx">
            <img :src="item.imgPath" alt="" />
            <p class="text">{{ item.text }}</p>
          </li>
        </ul>
      </div>
      <div class="otherBox">
        <ul class="otherList">
          <li class="otherLi" v-for="(item, idx) in otherList" :key="idx">
            <span class="text">{{ item.text }}</span>
            <div class="flexBox">
              <span class="count" v-if="item.count">{{ item.count }}</span>
              <span class="tip" v-if="item.tip">{{ item.tip }}</span>
              <img src="../../assets/img/right_icon.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgPath: require("../../assets/img/my_img.png"),
      name: "别样风格",
      title: "寻宝人",
      myList: [
        {
          text: "粉丝",
          count: "156",
        },
        {
          text: "关注",
          count: "1.1k",
        },
        {
          text: "赞过",
          count: "2.3W",
        },
        {
          text: "收藏",
          count: "45",
        },
      ],
      orderList: [
        {
          text: "待付款",
          imgPath: require("../../assets/img/pay_icon.png"),
        },
        {
          text: "待发货",
          imgPath: require("../../assets/img/fahuo_icon.png"),
        },
        {
          text: "待收货",
          imgPath: require("../../assets/img/shouhuo_icon.png"),
        },
        {
          text: "晒单",
          imgPath: require("../../assets/img/show_icon.png"),
        },
        {
          text: "退款/售后",
          imgPath: require("../../assets/img/tuikuan_icon.png"),
        },
      ],
      otherList: [
        {
          text: "我的优惠劵",
          count: 5,
        },
        {
          text: "会员中心",
          tip: "马上开通领福利",
        },
        {
          text: "在线客服",
        },
        {
          text: "申请成为手艺人",
        },
        {
          text: "意见与反馈",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
#center {
  background: #f5f5f5;
  padding-bottom: 1.08rem;
  .headBox {
    height: 1.6rem;
    background-image: url("../../assets/img/center_bg.png");
    background-size: cover;
    position: relative;
    .set {
      position: absolute;
      width: 0.24rem;
      height: 0.24rem;
      top: 0.02rem;
      right: 0.1rem;
    }
    .vip {
      position: absolute;
      width: 3.43rem;
      height: 0.42rem;
      bottom: 0;
      left: 0.16rem;
    }
    .open {
      z-index: 10;
      position: absolute;
      width: 0.56rem;
      height: 0.22rem;
      bottom: 0.1rem;
      right: 0.5rem;
    }
  }
  .contentBox {
    margin: 0.02rem 0.16rem 0;
    .myBox {
      background: #ffffff;
      padding-bottom: 0.14rem;
      .head {
        display: flex;
        margin-left: 0.12rem;
        img {
          width: 0.72rem;
          height: 0.72rem;
          margin-top: 0.14rem;
        }
        .left {
          display: flex;
          flex-direction: column;
          margin-left: 0.12rem;
          .name {
            font-size: 0.16rem;
            font-weight: bold;
            color: #333333;
            margin-top: 0.25rem;
          }
          .title {
            display: inline-block;
            width: 0.54rem;
            height: 0.2rem;
            background: #1b7373;
            border-radius: 0.08rem;
            font-size: 0.12rem;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            line-height: 0.2rem;
            margin-top: 0.05rem;
          }
        }
      }
      .myList {
        display: flex;
        margin-top: 0.1rem;
        .myLi:nth-child(1) {
          margin-left: 0.3rem;
        }
        .myLi {
          display: flex;
          flex-direction: column;
          text-align: center;
          margin-left: 0.62rem;
          .text {
            font-size: 0.12rem;
            color: #666666;
            opacity: 0.6;
            margin-top: 0.03rem;
          }
          .count {
            font-size: 0.14rem;
            font-weight: bold;
            color: #666666;
          }
        }
      }
    }
    .orderBox {
      background: #ffffff;
      margin-top: 0.18rem;
      padding: 0.12rem 0 0.23rem;
      .head {
        display: flex;
        .orderText {
          font-size: 0.14rem;
          color: #333333;
          margin-left: 0.08rem;
        }
        .all {
          font-size: 0.12rem;
          color: #999999;
          margin: 0.02rem 0 0 2.29rem;
        }
        .rightIcon {
          width: 0.08rem;
          height: 0.16rem;
          margin: 0.02rem 0 0 0.02rem;
        }
      }
      .orderList {
        display: flex;
        margin: 0.06rem 0.16rem 0 0.12rem;
        justify-content: space-between;
        .orderLi:nth-child(1) {
          margin-left: 0;
        }
        .orderLi {
          display: flex;
          flex-direction: column;
          text-align: center;
          img {
            width: 0.32rem;
            height: 0.32rem;
            margin: 0 auto;
          }
          .text {
            font-size: 0.12rem;
          }
        }
      }
    }
    .otherBox {
      background: #ffffff;
      margin-top: 0.17rem;
      padding: 0.13rem 0 0.16rem;
      .otherList {
        .otherLi:nth-child(1) {
          margin-top: 0rem;
        }
        .otherLi {
          display: flex;
          justify-content: space-between;
          padding-bottom: 0.18rem;
          border-bottom: 0.01rem solid #ebebeb;
          margin: 0.14rem 0.14rem 0 0.12rem;
          .text {
            font-size: 0.14rem;
            color: #333333;
            opacity: 1;
          }
          .flexBox {
            display: flex;
            justify-content: space-between;
            .count {
              width: 0.16rem;
              height: 0.16rem;
              font-size: 0.1rem;
              font-weight: bold;
              color: #ffffff;
              background-color: #e42121;
              border-radius: 50%;
              text-align: center;
            }
            .tip {
              font-size: 0.1rem;
              font-weight: bold;
              color: #e42121;
              width: 1rem;
            }
            img {
              width: 0.16rem;
              height: 0.16rem;
            }
          }
        }
      }
    }
  }
}</style
>>
